<template>
  <div class="login-wrap">

    <el-form class="login-container">
      <h1 class="title">用户登录</h1>
      <el-form-item label="账号">
        <el-input type="text" v-model="uname" placeholder="登录账号" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="登录密码">
        <el-input type="password" v-model="password" placeholder="登录密码" autocomplete="off"></el-input>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="dosubmit">登录</el-button> &nbsp;  &nbsp;
        <el-button @click="userquer">注册账号</el-button>  &nbsp;   &nbsp;
        <el-button @click="tourist">游客登录</el-button>
      </el-form-item>

    </el-form>

  </div>
</template>

<script>


import axios from "axios";


export default {
  name: 'login',
  data: function() {
    return {
      uname: '',
      password: ''
    }
  },
  methods: {
    tourist(){
      this.$router.push({
            path:"/JH"
          }
      )
      this.$message.info("当前为游客身份只能进行读留言的功能");
    },
    userquer(){
      this.$router.push({
            path:"/reg"
          }
      )
    },
    dosubmit: function() {
      let params = {
        user: this.uname,
        pass: this.password
      };

      axios({
        url:"/login.do",
        method:"post",
        data: params
      }).then(data=>{
        // 存储信息
        if(data.data.code===1000){
          console.log(data.data.data.username)
          window.localStorage.setItem('UserName',data.data.data.username)
          window.localStorage.setItem('ID',data.data.data.id)

          window.localStorage.setItem('token',data.data.data.token)
          window.localStorage.setItem('icon',data.data.data.icon)
          console.log(data.data.data.token)
          console.log(window.localStorage.getItem("token"))
          // 跳转
          this.$router.push({
            path:"/home"
          });
        }else {
          this.$message.error(data.data.msg);
        }
      }).catch(()=>{
        this.$message.error("登录失败，数据请求失败")
      })

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-image: url();
  /* background-color: #112346; */
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}

.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>
